<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">

				<html2canvas class="canvas" ref="canvas" :domId="domId" @renderFinish="renderFinish">
					<view id="poster">
						<div class="top-box">
							<div class="image-box">
								<img class="top-box-cover" src="@/static/img/createMuseum.png" mode="aspectFill"></img>
							</div>

							<div class="top-detail-box">
								<image :src="myMuseumDetail.owner.avatar" mode="aspectFill" class="top-box-header">
								</image>
								<div style="display: flex;flex-direction: column;">
									<span class="top-title">{{ myMuseumDetail.owner.nickname }}的数字藏馆正在展览</span>
									<span class="top-desc">艺术新天地</span>
								</div>
							</div>

							<div class="line-box">
								<div class="dashed"></div>
							</div>
							<div class="qrcode-box">
								<div class="flex-column">
									<span>九歌灵藏</span>
									<p>一站式数字藏品铸造发售服务平台，快来搭建你的数字藏馆吧～</p>
								</div>
								<img class="qrcode-img" :src="qrcodeImg" mode=""></img>
							</div>
						</div>
					</view>
				</html2canvas>


				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="museum-top">
					<image src="../../../static/img/museumDetailBg.png" mode="aspectFill" class="bg-img"></image>
					<div style="position: relative;">
						<image src="../../../static/img/museumBg.png" mode="aspectFill"
							style="position: absolute;width: 37.33vw;height: 21.33vw;left: 31.47vw;top: 10.67vw;">
						</image>
						<span
							style="position: absolute;font-size: 2.67vw;font-weight: 600;color: #000;top: 24.8vw;left: 39.47vw;width: 21.33vw;text-align: center;">NO.{{ collectionInfo.info.id }}</span>
					</div>
				</div>
				<div class="info-box">
					<div style="text-align: center;">
						<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"
							style="text-align: center;transform: rotate(90deg);"></image>
					</div>
					<div class="center" style="justify-content: space-between;padding-right: 5.33vw;">
						<span class="jiu-font48-fff" style="font-size: 5.87vw;">{{ collectionInfo.info.name }}</span>
						<div class="center jiu-font24-aaa" style="color: #FFCE80;">
							<image src="../../../static/img/dianzan.png" class="image427" mode="aspectFill"
								style="margin-right: 1.07vw;"></image>
							{{ collectionInfo.likeCount }}
						</div>
					</div>
					<div class="desc">
						{{ collectionInfo.info.desc }}
					</div>

					<div class="create-box">
						<div class="btn" @tap="onEdit(collectionInfo.info.id)">编辑</div>
					</div>

					<div class="museumBao">
						<div style="background-color: #000;width: 91.47vw;border-radius: 6.4vw;"
							@tap="toReleaseMuseum(0)">
							<div style="width: 100%;height: 91.47vw;position: relative;display: flex;">
								<image src="@/static/img/save.png" mode="aspectFill" class="update-img"></image>
								</image>
								<!-- <image src="@/static/img/swiper.jpg" mode="aspectFill" class="start-bg">
								</image> -->
								<div style="width: 100%;height: 100%;display: flex;justify-content: center;"
									v-if="!museumList">
									<image src="@/static/img/cangpinSelect.png" mode="aspectFill"
										style="width: 58vw;height: 42vw;position: absolute;top: 21vw;"></image>
								</div>
								<image :src="museumList[0].spu.cover" mode="aspectFill" class="start-bg" v-else></image>
								<div class="right-box">
									<image src="@/static/img/museumStart.png" mode="aspectFill" class="image427">
									</image>
									<span>镇馆之宝</span>
								</div>
								<div class="num-box" v-if="museumList">
									<image src="@/static/img/num.png" mode="aspectFill" class="num-img"></image>
									<!-- <span>{{ Number(museumDetail.mainCollection.collection.nftItemId) + Number(1) }}/{{museumDetail.mainCollection.spu.nftMaxSupply }}</span> -->
									<span>{{ museumList[0].collection.nftItemIdV }}/{{museumList[0].spu.nftMaxSupply }}</span>
								</div>
							</div>
							<div class="museumInfo-box">
								<span class="jiu-font32-fff"
									style="width: 77.87vw;overflow: hidden;text-overflow: ellipsis;">{{ museumList[0].spu.spuTitle || '点击放置藏品'}}</span>
								<div class="center" style="margin-top: 2.4vw;justify-content: space-between;">
									<div class="center">
										<block v-if="!museumList">
											<image src="@/static/img/jiugeLogo.png" mode="aspectFill" class="image427"
												style="border-radius: 50%;"></image>
											<span class="jiu-font24-555" style="margin: 0 1.07vw;">九歌灵藏</span>
											<span class="create-border">创作者</span>
										</block>
										<block v-else>
											<image :src="museumList[0].creator.avatar" mode="aspectFill"
												class="image427" style="border-radius: 50%;"></image>
											<span class="jiu-font24-555"
												style="margin: 0 1.07vw;">{{ museumList[0].creator.name }}</span>
											<span class="create-border">创作者</span>
										</block>
									</div>
									<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427">
									</image>
								</div>
							</div>
						</div>
						<image :src="myMuseumDetail.theme.img" mode="aspectFill" style="height: 28.8vw;width: 100%;">
						</image>
					</div>
				</div>
				<div style="background-color: #000;padding: 9.07vw 0 4.27vw 4.27vw;">
					<span class="jiu-font32-555">其他藏品</span>
					<div class="list-box">
						<div v-for="(item,index) in museumList.slice(1,museumList.length)" @tap="toReleaseMuseum(index + 1)">
							<div class="item-box" >
								<div style="position: relative;">
									<image src="@/static/img/cangpinSelect.png" mode="aspectFill" class="item-bg" v-if="!item"></image>
									<image :src="item.spu.cover" mode="aspectFill" class="item-bg" v-else></image>
									<div class="num-box" style="top: 34.13vw;left: 2.13vw;height: 4.27vw;" v-if="item">
										<image src="../../../static/img/num.png" mode="aspectFill" class="num-img">
										</image>
										<span>{{ item.collection.nftItemIdV }}/{{ item.spu.nftMaxSupply }}</span>
										<!-- <span>223/252</span> -->
									</div>
								</div>
								<div class="small-info">
									<span class="jiu-font32-fff smallTitle"
										style="height: 11.73vw;" v-if="item">{{ item.spu.spuTitle }}</span>
										<span class="jiu-font32-fff smallTitle"
											style="height: 11.73vw;" v-else>点击放置藏品</span>
									<div class="center" style="margin-top: 2.4vw;justify-content: space-between;">
										<div class="center" v-if="!item">
											<image src="@/static/img/jiugeLogo.png" mode="aspectFill" class="image427"
												style="border-radius: 50%;"></image>
											<span class="jiu-font24-555"
												style="margin: 0 1.07vw;overflow: hidden;text-overflow: ellipsis;">九歌灵藏</span>
											<span class="create-border">创作者</span>
										</div>
										
										<div class="center" v-else>
											<image :src="item.creator.avatar" mode="aspectFill" class="image427"
												style="border-radius: 50%;"></image>
											<span class="jiu-font24-555"
												style="margin: 0 1.07vw;width: 12.8vw;overflow: hidden;text-overflow: ellipsis;display: flex;white-space: nowrap;">{{ item.creator.name }}</span>
											<span class="create-border">创作者</span>
										</div>
										<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427">
										</image>
									</div>
								</div>
							</div>
							<image :src="myMuseumDetail.theme.img1" mode="aspectFill"
								style="width: 44.8vw;height: 8.53vw;"></image>
						</div>
					</div>
				</div>
			</ma-refresh>
			<div slot="footer">
				<div style="display: flex;justify-content: space-between;padding: 2.13vw 5.33vw 2.13vw 6.4vw;">
					<div class="column" @tap="onShare">
						<image src="@/static/img/share.png" mode="heightFix" class="image64"></image>
						<span class="pet-font-aaa">分享</span>
					</div>

					<div class="update-theme" @tap="toChange">更换主题</div>

					<div class="open-btn" @tap="onUnlock">解锁展位</div>

				</div>
			</div>
		</ma-body>

		<div class="mask" v-if="show" @tap="show = false">
			<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap.stop="show = false"></image>
			<div class="modal">
				<image class="canvasImg" :src="canvasImg" mode="widthFix" @tap.stop="show = true"></image>
				<div class="button-box">
					<div class="flex-row">
						<div class="flex-column" @tap.stop="save">
							<image src="@/static/img/save.png" mode=""></image>
							<span>长按上图保存图片</span>
						</div>
						<div class="flex-column" @tap="onCopy">
							<image src="@/static/img/copy.png" mode=""></image>
							<span>复制链接</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<unlockCard ref="unlock" :pavilionId="collectionInfo.info.id" @unlockSuccess="lockSuccess"></unlockCard>

	</div>
</template>

<script>
	import {
		base64ToPath,
		pathToBase64
	} from '@/components/html2canvas/image-tools.js';
	import unlockCard from '../../components/unlock-card/unlock-card';
	
	export default {
		components: {
			unlockCard
		},
		data() {
			return {
				qrcodeImg: '',
				detailType: 'my',
				collectionInfo: {},
				myMuseumDetail: {},
				museumList: [],
				show: false,
				canvasImg: '',
			}
		},
		methods: {
			async lockSuccess(){
				await this.getCollectionInfoAggr();
			},
			async onShare() {
				if (this.canvasImg) this.show = true;
				else {
					await this.getQrcode();
					uni.showLoading({
						title: '生成中...'
					})
					await this.$refs.canvas.create(this.domId);
					setTimeout(() => {
						uni.hideLoading()
						this.show = true;
					}, 500)
				}
			},
			save() {
				uni.showToast({
					icon: 'none',
					title: '请长按上图保存图片'
				});
				return;
			},
			getShareUrl() {
				let baseUrl = 'https://www.jiugemeta.com/#/subPackB/pages/myMuseumDetail/myMuseumDetail';
				// let baseUrl = 'http://localhost:8080/#/pages/registered/registered';
				let query = `?id=${this.collectionInfo.info.id}`;
				return baseUrl + query;
			},
			//生成二维码图片
			async getQrcode() {
				if (this.qrcodeImg) return;
				let res = await this.$u.api.getQrcode({
					content: this.getShareUrl()
				})
				console.log('153454', res)
				this.qrcodeImg = res.msg;
			},
			toChange() {
				this.$ma.route.changeTheme()
			},
			toReleaseMuseum(index) {
				this.$ma.route.releaseMuseum({
					id: this.collectionInfo.info.id,
					index: index
				})
			},
			// myMuseumDetail/myMuseumDetail
			onEdit(id) {
				this.$ma.route.createMuseum({
					eType: 'edit',
					id: id
				})
			},
			guan() {
				uni.showToast({
					icon: "none",
					title: "敬请期待"
				})
			},
			async getCollectionInfoAggrMy() {
				let res = await this.$u.api.getCollectionInfoAggrMy();
				this.collectionInfo = res;

				if (res) {
					this.showInfo = true;
				} else {
					this.showInfo = false
				}
			},
			async getCollectionInfoAggr() {
				let id = this.collectionInfo.info.id
				let res = await this.$u.api.getCollectionInfoAggr({}, id);

				this.myMuseumDetail = res;
				
				this.museumList = [];
				this.museumList = res.otherCollection;
				
				this.$forceUpdate();
			},
			renderFinish(filePath) {
				this.canvasImg = filePath;
			},
			onUnlock(){
				this.$refs.unlock.open()
			}
		},
		async onLoad(e) {
			console.log(this.user.myWallet)
			await this.getCollectionInfoAggrMy();
			await this.getCollectionInfoAggr();
			await this.getQrcode();
		},
		async onShow() {
			await this.getCollectionInfoAggr();
			console.log(this.museumList)
		},
		mounted() {
			this.domId = '#poster';
		},
	}
</script>

<style lang="scss">
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 100vh;
		width: 100vw;
		background-color: #000;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;


		.modal {
			display: flex;
			flex-direction: column;
			align-items: center;

			.button-box {
				padding-top: 4.27vw;
				border-radius: 6.4vw 6.4vw 0 0;
				background-color: #1B1B1B;
				width: 100%;
				display: flex;
				flex-direction: column;

				.flex-row {
					display: flex;
					align-items: center;
					padding: 0 14.93vw;
					justify-content: space-between;
					padding-top: 2.13vw;
					padding-bottom: calc(4.27vw + constant(safe-area-inset-bottom));
					padding-bottom: calc(4.27vw + env(safe-area-inset-bottom));
				}

				.flex-column {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						height: 14.93vw;
						width: 14.93vw;
					}

					span {
						font-size: 3.2vw;
						color: #FFF;
						margin-top: 1.33vw;
					}
				}

				.cancel-box {
					width: 100%;
					box-sizing: content-box;
					height: 17.07vw;
					padding-bottom: constant(safe-area-inset-bottom);
					padding-bottom: env(safe-area-inset-bottom);
					display: flex;
					align-items: center;
					justify-content: center;

					.cancel-button {
						width: 89.33vw;
						height: 12.8vw;
						font-size: 3.73vw;
						color: #555;
						background-color: #000;
						border-radius: 6.4vw;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	.top-box {
		border-radius: 6.4vw;
		width: 82.93vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 2.5vw;

		.image-box {
			width: 100%;
			height: 82.5vw;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #272727;
			border-radius: 7.5vw;
			padding: 2.5vw;
		}

		.top-detail-box {
			padding: 5vw;
			display: flex;
			align-items: center;

			.top-box-header {
				width: 12.5vw;
				height: 12.5vw;
				border-radius: 50%;
				margin-right: 2.5vw;
			}

			.top-title {
				font-size: 4.38vw;
				font-weight: 500;
				color: #efefef;
			}

			.top-desc {
				font-size: 3.75vw;
				color: #A972FF;
				font-weight: 300;
			}
		}

		.top-box-cover {
			width: 43.13vw;
			height: 43.13vw;
			background-color: #272727;
		}

		.name-box {
			height: 10.93vw;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 6.4vw;

			.logo-img {
				width: 4.27vw;
				height: 4.27vw;
				margin-right: 2.13vw;
				display: block;
			}

			span {
				height: 4.27vw;
				width: 4.27vw;
				background: linear-gradient(180deg, #FFCE80 0%, #A972FF 100%);
				border-radius: 50%;
				display: block;
				margin-right: 2.13vw;
			}

			.top-box-name {
				font-size: 3.2vw;
				color: #bbb;
			}
		}

		&-cover {
			height: 74.4vw;
			width: 74.4vw;
			display: block;
			background-color: #BBB;
			border-radius: 6.4vw;
		}

		.line-box {
			padding-top: 4.27vw;
			width: 100%;
			// overflow: hidden;
			position: relative;

			&:after {
				content: '';
				height: 4.27vw;
				width: 4.27vw;
				border-radius: 50%;
				position: absolute;
				left: -2vw;
				top: 90%;
				transform: translate(-50%, -50%);
				background-color: #000;
			}

			&:before {
				content: '';
				height: 4.27vw;
				width: 4.27vw;
				border-radius: 50%;
				position: absolute;
				right: -2vw;
				top: 90%;
				transform: translate(50%, -50%);
				background-color: #000;
			}

			.dashed {
				background: linear-gradient(to left,
						transparent 0%,
						transparent 50%,
						#000 50%,
						#000 100%);
				background-size: 16px 1px;
				background-repeat: repeat-x;
				width: 100%;
				height: 1px;
			}
		}

		.qrcode-box {
			display: flex;
			align-items: center;
			padding: 4.27vw 4.27vw 4.27vw 6.4vw;

			.flex-column {
				flex: 1;
				display: flex;
				flex-direction: column;

				span {
					font-size: 3.73vw;
					color: #AAA;
				}

				p {
					font-size: 3.2vw;
					color: #535353;
					margin-top: 0.53vw;
				}
			}

			.qrcode-img {
				width: 14.93vw;
				height: 14.93vw;
				border-radius: 2.13vw;
				background-color: #BBB;
			}
		}
	}


	#poster {
		width: 82.93vw;
		// height: 128.27vw;
		border-radius: 6.4vw;
		background-color: #1B1B1B;
		margin-left: 8.53vw;

		.img-box {
			width: 100%;
			padding: 2.13vw 2.13vw 0;
			height: 85.07vw;
			position: relative;
			border-radius: 6.4vw;

			.logo {
				width: 100%;
				height: 100%;
				border-radius: 6.4vw;
			}

			.num-box {
				display: flex;
				align-items: center;
				height: 4.27vw;
				background-color: #323232;
				border-radius: 1.07vw;
				position: absolute;
				left: 4.27vw;
				bottom: 6.4vw;

				&-left {
					width: 8.8vw;
					height: 100%;
					font-size: 3.47vw;
					border-radius: 1.07vw;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(270deg, #FFCE80 0%, #A972FF 100%);
					font-weight: 900;
				}

				&-right {
					font-size: 2.67vw;
					color: #FFCE80;
					padding: 0.27vw 1.07vw;
				}
			}
		}

		.bottom-box {
			width: 100%;
			padding: 4.27vw 6.4vw;

			.top {
				display: flex;
				align-items: center;
				height: 11.2vw;

				.gradient {
					width: 1.07vw;
					height: 11.2vw;
					background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
					border-radius: 12.8vw;
					margin-right: 2.14vw;
				}

				.column {
					display: flex;
					align-items: flex-start;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 4.27vw;
						color: #FFF;
						font-weight: 500;
						margin-bottom: 1.07vw;
					}

					.tag {
						font-size: 2.67vw;
						color: #A972FF;
						border: 1px solid #A972FF;
						border-radius: 1.07vw;
						padding: 0.27vw 1.07vw;
					}
				}
			}

			.line {
				padding: 4.27vw 0;
				width: 82.93vw;
				// overflow: hidden;
				position: relative;
				left: -6.4vw;

				&:after {
					content: '';
					height: 4.27vw;
					width: 4.27vw;
					border-radius: 50%;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(-50%, -50%);
					background-color: #000;
				}

				&:before {
					content: '';
					height: 4.27vw;
					width: 4.27vw;
					border-radius: 50%;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(50%, -50%);
					background-color: #000;
				}

				.dashed {
					background: linear-gradient(to left,
							transparent 0%,
							transparent 50%,
							#000 50%,
							#000 100%);
					background-size: 18px 1px;
					background-repeat: repeat-x;
					width: 100%;
					height: 1px;
				}
			}

			.bottom {
				display: flex;

				// align-items: center;
				// justify-content: space-between;
				&-column {
					flex: 1;
					flex-direction: column;
					overflow: hidden;
					margin-right: 4vw;

					.row {
						display: flex;
						align-items: center;

						.nickname {
							font-size: 3.73vw;
							font-weight: 500;
							color: #aaa;
						}

						.label {
							font-size: 2.67vw;
							color: #FFCE80;
							border: 1px solid #FFCE80;
							border-radius: 1.07vw;
							padding: 0.27vw 1.33vw;
							margin-left: 1.07vw;
						}
					}

					p {
						font-size: 3.2vw;
						color: #535353;
						margin-top: 0.53vw;
					}
				}

				.avatar {
					transform: scale(2);
					height: 7.5vw;
					width: 7.5vw;
					border-radius: 2.13vw;
					background-color: #BBB;
				}
			}
		}
	}


	.canvas {
		position: absolute;
		left: 99999vw;
	}

	.canvasImg {
		// transform: scale(2);
		width: 85vw;
		display: block;
		// margin-bottom: 3.73vw;
		margin-bottom: 10.67vw;
		border-radius: 6.4vw;
		z-index: 111;
		position: absolute;
		top: 20vw;
	}


	.column {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.pet-font-aaa {
		font-size: 2.67vw;
		font-weight: 300;
		color: #aaa;
	}

	.btn {
		width: 62.67vw;
		line-height: 12.8vw;
		border-radius: 6.4vw;
		background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
		box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.48);
		text-align: center;
		font-size: 3.73vw;
		font-weight: 500;
		color: #000;
	}

	.item-bg {
		width: 40.53vw;
		height: 40.53vw;
		border-radius: 5.33vw;
	}

	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.image64 {
		width: 6.4vw;
		height: 6.4vw;
	}

	.lookBig {
		width: 8.4vw;
		height: 8.4vw;
		z-index: 6;
		position: absolute;
		top: 4.27vw;
		right: 2.27vw;
	}

	.center {
		display: flex;
		align-items: center;
	}

	.num-box {
		display: inline-flex;
		align-items: center;
		border-radius: 1.07vw;
		background-color: #323232;
		position: absolute;
		bottom: 6.4vw;
		left: 6.4vw;

		.num-img {
			width: 8.8vw;
			height: 4.27vw;
			display: block;
			border-radius: 1.07vw;
		}

		span {
			padding: 0 1.07vw;
			color: #FFCE80;
			font-size: 2.67vw;
			font-weight: 300;
		}
	}

	.create-border {
		width: 10.67vw;
		line-height: 4.27vw;
		text-align: center;
		font-size: 2.67vw;
		font-weight: 300;
		color: #A972FF;
		border: 1px solid #A972FF;
		border-radius: 1.07vw;
	}

	.museum-top {
		position: relative;
		text-align: center;
		width: 100%;
		height: 40vw;

		.bg-img {
			width: 100%;
			height: 40vw;
			position: absolute;
			left: 0;
		}
	}

	.info-box {
		background-color: #1B1B1B;
		padding: 4.8vw 5.33vw;
		padding-right: 0;
		display: flex;
		flex-direction: column;

		.desc {
			margin-top: 4.27vw;
			font-size: 3.2vw;
			font-weight: 300;
			color: #555;
			padding-right: 5.33vw;
		}

		.create-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #1b1b1b;
			padding: 3.2vw 4.27vw;
			padding-right: 5.33vw;
			padding-left: 0;
			border-radius: 12.8vw 0 0 12.8vw;
			margin-top: 6.4vw;

			.btn {
				line-height: 12.8vw;
				width: 100%;
				text-align: center;
				background: #A972FF;
				box-shadow: 0vw 1vw 2vw rgba(71, 12, 114, 0.48);
				border-radius: 6.4vw;
				font-size: 3.73vw;
				font-weight: 500;
				color: #000;
			}
		}

		.museumBao {
			padding-right: 5.33vw;
			background-color: #1b1b1b;
			padding-top: 8.53vw;
			position: relative;

			.update-img {
				width: 14.93vw;
				height: 14.93vw;
				position: absolute;
				bottom: 6.9vw;
				right: 8.4vw;
				z-index: 5;
			}

			.bg-border {
				width: 91.47vw;
				height: 91.47vw;
				z-index: 1;
				display: block;
				// position: absolute;
			}

			.start-bg {
				width: 87.21vw;
				height: 87.21vw;
				// position: absolute;
				top: 2.13vw;
				left: 2.13vw;
				border-radius: 6.4vw;
				background-color: #000;
			}

			.right-box {
				position: absolute;
				top: 6.4vw;
				left: 6.4vw;
				padding: 2.13vw 3.2vw;
				background-color: #1B1B1B;
				border-radius: 4.27vw;
				display: flex;
				align-items: center;

				span {
					color: #fff;
					font-size: 3.2vw;
					font-weight: 500;
					margin-left: 1.07vw;
				}
			}

			.museumInfo-box {
				padding: 2.14vw 4.27vw 6.4vw 6.4vw;
				width: 91.47vw;


			}
		}

		.museum-title {
			padding-top: 9.07vw;
			padding-left: 4.27vw;
		}
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item-box {
			display: flex;
			flex-direction: column;
			padding: 2.13vw;
			background-color: #1b1b1b;
			border-radius: 6.4vw;
			margin-top: 4.27vw;
			// margin-right: 1.87vw;

			.small-info {
				display: flex;
				flex-direction: column;
				padding: 2.13vw 4.53vw 2.87vw 2.13vw;

				.smallTitle {
					display: block;
					width: 33.87vw;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
				}
			}
		}
	}

	.edit-btn {
		display: block;
		width: 91.47vw;
		line-height: 12.8vw;
		text-align: center;
		background: #A972FF;
		box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.48);
		border-radius: 6.4vw;
		font-size: 3.73vw;
		font-weight: 500;
		color: #000;
	}

	.update-theme {
		width: 36.53vw;
		line-height: 12.8vw;
		font-size: 3.73vw;
		font-weight: 500;
		color: #000;
		border-radius: 6.4vw;
		text-align: center;
		background: #A972FF;
	}

	.open-btn {
		width: 36.53vw;
		line-height: 12.8vw;
		font-size: 3.73vw;
		font-weight: 500;
		border-radius: 6.4vw;
		text-align: center;
		color: #000;
		background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
		box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.48)
	}
</style>
